<template>
  <div class="app">
    <br>
    账号: <input type="text" v-model="account"> <br> <br>
    密码: <input type="password" v-model="password"> <br> <br>
    性别: <input type="radio" v-model="gender" value="man" /> 男 <input type="radio" v-model="gender" value="girl" /> 女
    <br> <br>
    爱好: 
      抽烟:<input type="checkbox" v-model="hobby" value="smoke" />
      喝酒:<input type="checkbox" v-model="hobby" value="drink" />
      打架:<input type="checkbox" v-model="hobby" value="fight" />
      结婚:<input type="checkbox" v-model="hobby" value="marry" />
      <br> <br>
    所属地区
      <select v-model="area">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="tianjin">天津</option>
        <option value="xian">西安</option>
      </select>
      <br> <br>
    其他信息
      <textarea v-model="other"></textarea>
      <br> <br>
    <input type="checkbox" v-model="isArrop" value=""/> 阅读并同意 <a href="#">用户协议</a>
    <br> <br>
    <button>提交</button>
  </div>
</template>

<script>
export default {
  name: "showInputName",
  data() {
    return {
      account: "",
      password: "",
      gender: "",
      hobby: [],
      area: "",
      other: "",
      isArrop: ""
    }
  },
}
</script>

<style>
.app {
  background-color: #ddd;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>